<template>
  <div>
    <Chart :cdata="cdata"/>
  </div>
</template>

<script>
import Chart from './chart.vue'
import { isNotEmpty } from '@/utils'

export default {
  props: {
    apiData: {},
  },
  data() {
    return {
      cdata: {},
    }
  },
  watch: {
    apiData: {
      handler(newData) {
        if (!isNotEmpty(newData)) return
        this.getData(newData)
      },
      immediate: true,
      deep: true
    }
  },
  components: {
    Chart,
  },
  mounted() {
  },
  methods: {
    getData(apiData) {
      if (!apiData || !apiData.length) {
        return {xData: [], regions: [], seriesData: []}
      }
      const xData = apiData.map((item) => {
        return item.areaName + '所'
      })

      // 折线图数据（同比、环比），颜色数组为 ['#4cad1d', '#59566f']
      const lineSeriesNames = ['同比', '环比']
      const lineColors = ['#4cad1d', '#e79186']
      const lineSeriesData = lineSeriesNames.map((name, idx) => {
        const data =
            idx === 1
                ? apiData.map(({tongBiBianHuaLiang}) => tongBiBianHuaLiang )
                : apiData.map(({huanBiBianHuaLiang}) => huanBiBianHuaLiang )
        return {
          name: name,
          type: 'line',
          data: data,
          smooth: false,
          symbol: 'circle',
          symbolSize: 4,
          // 折线节点设置：内层颜色与折线颜色一致
          itemStyle: {
            color: lineColors[idx],
            borderColor: lineColors[idx]
          },
          lineStyle: {
            color: lineColors[idx]
          },

        }
      })

      // 柱状图数据，颜色数组为 ['#16b3e0', '#bcb155', '#4fb31c']
      const barSeriesNames = ['警情总量', '上一周期', '去年同期']
      const barSeriesKeys = ['curNum', 'huanBiNum', 'tongQiNum']
      const barColors = ['#16b3e0', '#bcb155', '#4fb31c']
      const barSeriesData = barSeriesNames.map((name, idx) => {
        const data = apiData.map(item => item[barSeriesKeys[idx]])
        return {
          name: name,
          type: 'bar',
          data: data,
          itemStyle: {
            color: barColors[idx]
          }
        }
      })

      this.cdata = {xData, lineSeriesData, barSeriesData}
    }

  }
}
</script>

<style lang="scss" scoped>
</style>
